<template>
    <div class="WorldInoculation">
        <div id="winoculation" style="width:900px;height:500px;margin:30px 300px"></div>
    </div>
</template>

<script>
// import axios from 'axios'
import echarts from "echarts"
export default {
    name:"WorldInoculation",
    data(){
        return{
            data:[]
        }
    },
    methods:{
        myEcharts(){
            var line = echarts.init(document.getElementById('winoculation'))

            var option = {
                title:{
                    left: 'center',
                    text: '截至2021年5月31日世界主要国家疫苗接种量(单位：百万剂次)'
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: ['中国','美国','印度','巴西','英国','德国','法国','意大利','加拿大','日本'],
                    axisTick: {
                        alignWithLabel: true,
                    },
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: [661.47,294.93,210.45,67.48,64.92,49.94,36.22,61.95,23.86,13.21],
                    name: "接种剂次",
                    type: "bar",
                    barWidth: "60%",
                    label: {
                            show: true,
                            position: 'top'
                        },
                    }
                ]
            };
            line.setOption(option)
        }
    },
    mounted(){
        this.myEcharts()
    }
}
</script>

<style>
</style>